.essential-theme {
  .is-list-colored {

    ion-grid {
      display: none;
    }

    ion-grid.is-items-show {
      display: flex;
      background-color: $searchbar-color;

      ion-row {
        padding-left: 16px;
        padding-right: 16px;

        button:first-child {
          flex-grow: 1;
          margin-right: 12px;
        }
      }

      ion-row:not(:last-child) {
        border-bottom: 1px solid map-get($colors, is-mute-light);

        ion-col {
          margin-top: 16px;
          margin-bottom: 16px;
          color: map-get($colors, is-mute-dark);
          font-size: 1.5rem;
          font-weight: 300;
        }

        ion-col:first-child {
          color: map-get($colors, is-mute-normal);
        }
      }

      ion-row:last-child {
        margin-top: 4px;
        margin-bottom: 4px;
      }
    }

    ion-item {
      h2 {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      h3 {
        font-size: 1.7rem;
        font-weight: 400;
        color: map-get($colors, is-mute-normal);
      }

      h2 + p {
        margin-top: 9px;
      }
    }

    ion-item.is-item-category-success {
      border-left: 5px solid map-get($colors, success);

      ion-thumbnail.is-icon-thumbnail {
        min-width: 30px;

        ion-icon {
          color: map-get($colors, success);
        }
      }

      .is-list-colored-button-group h3 {
        color: map-get($colors, success);
      }
    }

    ion-item.is-item-category-danger {
      border-left: 5px solid map-get($colors, danger);

      ion-thumbnail.is-icon-thumbnail {
        min-width: 30px;

        ion-icon {
          color: map-get($colors, danger);
        }
      }

      .is-list-colored-button-group h3 {
        color: map-get($colors, danger);
      }
    }

    ion-item.is-item-category-light {
      border-left: 5px solid color($colors, light, base);
    }

    ion-item.is-item-category-secondary {
      border-left: 5px solid map-get($colors, secondary);
    }

    ion-item.is-item-category-primary {
      border-left: 5px solid map-get($colors, primary);
    }

    ion-item.is-item-category-dark {
      border-left: 5px solid map-get($colors, dark);
    }

    .is-list-colored-button-group {
      margin: 0;
      padding-top: 11px;
      padding-bottom: 11px;
      display: flex;
      flex-direction: row;
      align-items: start;
      align-self: stretch;
      position: relative;

      div p:first-child {
        padding-bottom: 30px;
      }

      button {
        align-self: center;
        ion-icon {
          font-size: 24px;
        }
      }
    }
  }
}
